import Vue from 'vue/dist/vue.esm.browser'
import axios from 'axios'

let vm = new Vue({
  data: {
    // 购物车数据
    car: []
  },
  methods: {
    sub(v) {
      if (v.count <= 1) {
        let isDelete = confirm('在减少就要删除了！！！！')

        if (isDelete) {
          // 删除 过滤id
          this.car = this.car.filter(item => item.id !== v.id)
        }
      } else {
        v.count--
      }
    }
  },
  computed: {
    totalPrice() {
      var price = 0;
      this.car.forEach(v => {
        // 是否被选中
        if (v.isChecked) {
          // 选中了 在计算数量和价钱
          price += v.price * v.count
        }
      })
      return price
    },
    totalCount() {
      // var count = 0;
      // this.car.forEach(v => {
      //   if (v.isChecked) {
      //     count += +v.count
      //   }
      // })
      // return count
      return this.car.reduce((p, n) => {
        return n.isChecked ? p + n.count : p
      }, 0)
    },
    totalChecked: {
      // 全选的状态
      get() {
        // 每一个单选都被选中 则全选被选择
        return this.car.every(item => item.isChecked)
      },
      // 全选状态改变
      set(checked) {
        // 让每一个单选状态  和全选保持一致
        this.car.forEach(item => item.isChecked = checked)
      }
    }
  }
}).$mount('#app')

axios.get('/car').then(resp => {
  vm.car = resp.data.data
})